import React, { Component } from 'react'

import BBS from './bbs'
import RateCom from './rate'
import { Link } from 'react-router-dom'
import $ from  'jquery'

import {
  LiveWrapper,
  CourseWrapper,
  VideoListWrapper,
  ContentWrapper,
  AbstractWrapper,
  ContentTitle,
  Content,
  HeaderWrapper,
  HeaderLeft,
  HeaderRight,
  AvatarWrapper,
  InfoWrapper
} from '../style.js'


export default class Video extends Component {
  constructor(props) {
    super(props)
    this.state = {
      screen: false,
      clientWidth: document.body.clientWidth,
      bigImg: ''
    }
  }

  componentDidMount() {
    setTimeout(()=> {
      this.renderPlay()
    },300)
  }

  componentWillUnmount() {
    if(window.localVideo && this.props.video.get('type') === 'LocalVideo') {
      window.localVideo.dispose()
    }
  }

  renderVideo() {
    const info = this.props.video ? this.props.video: {}
    const localImg = this.props.localImg&&this.props.localImg.get('picUrls') ? this.props.localImg.get('picUrls') : []
    return (
      <LiveWrapper>
        {this.renderHeader()}
      {/* 视频播放 */}
      <CourseWrapper>
        <div className="clearfix" style={{width: '100%', clear: 'both'}}>
          <div style={{width: this.state.screen ? '50%' : '78%', float: 'left', position: 'asbolute', left: '0'}} id="videoWrapper">
            {/* <video id="localVideo" className="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style={{width: '100%', height: '858px'}}>
              <source id="source" src={info.get('m3u8_url')} type="application/x-mpegURL"></source>
            </video> */}
          </div>
          <VideoListWrapper vw={this.state.screen ? '50%' : '22%'}>
            <div className="changeSize" onClick={()=> this.setState({screen: !this.state.screen})}>
              <a>
              &lt; {this.state.screen ? '缩小': '放大'} &gt;
              </a>
            </div>
            <ul>
              {
                localImg.map((item,idx) => {
                  return (
                    <li key={idx} onClick={this.changeBigImg.bind(this, item)}>
                      <img alt="" src={item}/>
                      <span>{idx+1}/{localImg.size}</span>
                    </li>
                  )
                })
              }
            </ul>
          </VideoListWrapper>
        </div>
      </CourseWrapper>
      {/* 课程评分，提问，简介 */}
      <ContentWrapper>
        <RateCom {...this.props} showModal={()=> this.props.changeVisible(true)} startAnswer={()=> this.props.changeAnswer()}/>
        {/* 提问 */}
        <BBS {...this.props}/>
        {/* 简介 */}
        <AbstractWrapper>
          <ContentTitle>
            课程简介
          </ContentTitle>
          <Content>
            {info.get('description')}
          </Content>
        </AbstractWrapper>
      </ContentWrapper>
      {
        this.state.bigImg ? <div style={{position: 'fixed', right: '0', top: '0', width: '800px', 'height': '400px', zIndex: '20000'}}>
          <img alt="" src={this.state.bigImg} style={{width: '100%'}} onClick={()=> this.setState({bigImg: ''})}/>
        </div> : ''
      }

    </LiveWrapper>
    )
  }

  renderHeader() {
    const info = this.props.video ? this.props.video: {}
    const user = JSON.parse(localStorage.getItem('userData'))
    return (
      <HeaderWrapper>
        <HeaderLeft>
          <Link to="/" title="返回首页"><i className="iconfont icon-tuichu2 icon"></i></Link>
            <span>{info.get('name')}</span>
        </HeaderLeft>
        <HeaderRight>
          <AvatarWrapper>
            <img alt="" src={info.get('teacherPhoto')}/>
            <span>{info.get('teacherName')}</span>
          </AvatarWrapper> 
          <InfoWrapper>
            <i className="iconfont icon-gerenxinxi icon"></i>
            <span>{user.name}</span>
            <span>{user.stuGradeStr}</span>
          </InfoWrapper>
        </HeaderRight>
      </HeaderWrapper>
    )
  }

  renderPlay() {
    debugger
    if(this.props.video.get('type') === 'JoyActivity'|| !this.props.video.get('type')) {
      return;
    }else {
      var x = document.createElement("VIDEO");
      x.setAttribute('class', 'video-js vjs-default-skin vjs-big-play-centered vjs-fluid')
      x.setAttribute('id', 'localVideo')
      x.setAttribute('data-setup', '{}')
      x.setAttribute('autoplay', true)
      x.controls = true
      x.preload = 'auto'
      x.style.width = '100%'
      x.style.height = '858px'
  
      let s = document.createElement("SOURCE");
      s.setAttribute('id', 'source')
      s.setAttribute('src', this.props.video.get('m3u8_lsd_url'))
      s.setAttribute('type', 'application/x-mpegURL')
  
      x.appendChild(s)
      document.getElementById('videoWrapper').appendChild(x)
  
      window.localVideo = window.videojs('localVideo', {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
        fluid: true
      })
      window.localVideo.play()
  
      var videoPanelMenu = $('.vjs-fullscreen-control')
      videoPanelMenu.before('<div class="vjs-subs-caps-button  vjs-menu-button vjs-menu-button-popup vjs-control vjs-button"  aria-live="polite" aria-expanded="false" aria-haspopup="true">'  
          + '<div class="vjs-menu" role="presentation">'  
          + '<ul class="vjs-menu-content" role="menu">'  
          + '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" type="1"  οnclick="changeVideo(1)">流畅</li>'  
          + '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" type="2" οnclick="changeVideo(2)">标清</li>'  
          + '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" type="3" οnclick="changeVideo(3)">高清</li>'
          + '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" type="3" οnclick="changeVideo(4)">超清</li>'    
          + '</ul></div>'  
          +'  <button class="vjs-subs-caps-button vjs-control vjs-button" type="button" aria-live="polite" title="清晰度切换" aria-disabled="false">'  
          +'      <span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">清晰度切换</span>'  
          +'  </button>'  
          +'</div>'  
      );
  
      $('.vjs-menu-item').on('click', (e)=> {
        let status = e.target.getAttribute('type')
        // var ctime= window.videojs("liveVideo").currentTime();
        let ctime = window.localVideo.currentTime()
        debugger  
        let src = ''
        switch(status) {
          case '1':
            src = this.props.video.get('m3u8_lld_url')
            break;
          case '2':
            src = this.props.video.get('m3u8_lsd_url')
            // window.videojs("liveVideo").src([{type: "application/x-mpegURL", src: this.props.video.get('m3u8_lsd_url')}]);  
            // window.videojs("liveVideo").play();  
            break;
          case '3':
            src = this.props.video.get('m3u8_lhd_url')
            // window.videojs("liveVideo").src([{type: "application/x-mpegURL", src: this.props.video.get('m3u8_lhd_url')}]);  
            // window.videojs("liveVideo").play(); 
            break;
          case '4':
            src = this.props.video.get('m3u8_lud_url')
            // window.videojs("liveVideo").src([{type: "application/x-mpegURL", src: this.props.video.get('m3u8_lud_url')}]);  
            // window.videojs("liveVideo").play(); 
            break;
        }
        window.localVideo.reset()
        window.localVideo.src({type: 'application/x-mpegURL', src})
        window.localVideo.load(src);
        window.myVideo.on('loadedmetadata', function() {
          window.localVideo.play()
          window.localVideo.currentTime(ctime)
        })

      }) 
    }
  }
  
  render() {
    return (
      <div>
        {
          this.renderVideo()
        }
      </div>
    )
  }
}